<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的分享码</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <link rel="stylesheet" href="weixin-demo/style.css">
	<link rel="stylesheet" href="./css/aui.css">
	<link rel="stylesheet" type="text/css" href="./css/aui-flex.css" />
	<link rel="stylesheet" href="./css/main.css">
	<link rel="stylesheet" href="./css/weui.min.css">

	<script type="text/javascript" src="./js/base.js"></script>
<!--	<script>-->
<!--		window.onload=function(){-->
<!--			var h = $("#ermzhongj").height();alert(h/2-30)-->
<!--			$('#txzhongj').css('top',h/2-30+"px");-->
<!--		}-->
<!--	</script>-->
</head>
<body style="text-align: center">
<!--<div class="aui-bar aui-bar-nav aui-bar-top">-->
<!--	<a class="aui-pull-left aui-btn " >-->
<!--		<span class="aui-iconfont aui-icon-left" onclick="javascript:window.history.back();" ></span>-->
<!--	</a>-->
<!--	<div class="aui-title">分享零元购</div>-->
<!--	<div class="weui-mask_transparent" ></div>-->
<!--</div>-->
	<div class="fenXiang_tit" style="position: relative;margin-top: 30px;font-size: 17px;font-weight: bolder">
		<div>邀请好友购买小普马桶盖</div>
		<div class="aui-margin-t-5">十个还有购买即可<span style="color: rgb(255,0,90);font-size: 20px;">免单!</span></div>
		<p class="aui-margin-t-10" style="font-size:14px;font-weight: 100">
			活动规则
			<i class="aui-iconfont aui-icon-right"></i>
		</p>
	</div>
	<div class="bg">
		<div id="codeerw" style="width: 100%;text-align: center;margin-top: 10px;" >
			<div style="width: 90%;background-color: white;margin: auto;padding: 30px 30px 15px 30px;border:3px solid ghostwhite">
				<div class="previewImage" style="padding-top:70px;text-align: center;margin: auto;width: 200px;height: 200px;background-image: url(http://www.pooai.cn/wx/frontend<?=$ewm_images?>)">
					<img id="txzhongj" style="margin: auto;border: 5px solid white;width:60px;position: relative;;"  src="http://www.pooai.cn/wx/frontend<?=$tx_images?>" onerror="this.src='http://www.pooai.cn/wx/frontend/web/upload/huoqu.png'">
				</div>
				<div style="margin-top:5px;font-size: 12px;font-weight: bolder;;position: relative" class="text">
					<div>您购买小普马桶盖后,</div>
					<div>邀请好友扫描二维码购买小普马桶盖后,</div>
					<div>即可获订单实付金额的<span style="color: rgb(255,0,90);font-size: 14px">10%</span>作为红包奖励,</div>
				</div>
			</div>
		</div>
	</div>
	<btn class="btn" style="margin-top: 5px;;width:98%;background-color: rgb(254,0,90)"  id="previewImage">分享给好友</btn>

<div id="qrCodeDiv">  </div>
<canvas id="demoCanvas" style="display: none">
</canvas>

</body>
<script type="text/javascript" src="./js/jquery-1.8.0.js"></script>

<!-- loading toast -->
<div id="loadingToast" style="display:none;">
	<div class="weui-mask_transparent"></div>
	<div class="weui-toast">
		<i class="weui-loading weui-icon_toast"></i>
		<p class="weui-toast__content">分享码生成中</p>
	</div>
</div>

<script>
	$('#loadingToast').fadeIn(50);
	$('.weui-mask_transparent').css('background-color','rgba(0,0,0,0.2)');
	$('.weui-mask_transparent').css('display','block');
</script>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript" src="./js/utf.js"></script>
<script type="text/javascript" src="./js/jquery.qrcode.js"></script>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript" src="./js/aui-toast.js"></script>
<script src="./js/zepto.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!--<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>-->
<!---->
<!--<script></script>-->
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 如有问题请通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
  wx.config({
	  debug: false,
	  appId: '<?=$signPackage["appId"];?>',
	  timestamp: <?= $signPackage["timestamp"];?>,
	  nonceStr: '<?=$signPackage["nonceStr"];?>',
	  signature: '<?=$signPackage["signature"];?>',
	jsApiList: [
		'checkJsApi',
		'onMenuShareTimeline',
		'onMenuShareAppMessage',
		'onMenuShareQQ',
		'onMenuShareWeibo',
		'hideMenuItems',
		'showMenuItems',
		'hideAllNonBaseMenuItem',
		'showAllNonBaseMenuItem',
		'translateVoice',
		'startRecord',
		'stopRecord',
		'onRecordEnd',
		'playVoice',
		'pauseVoice',
		'stopVoice',
		'uploadVoice',
		'downloadVoice',
		'chooseImage',
		'previewImage',
		'uploadImage',
		'downloadImage',
		'getNetworkType',
		'openLocation',
		'getLocation',
		'hideOptionMenu',
		'showOptionMenu',
		'closeWindow',
		'scanQRCode',
		'chooseWXPay',
		'openProductSpecificView',
		'addCard',
		'chooseCard',
		'openCard'
	  ]
  });
  wx.ready(function () {
	  var savePath= '';
		  $.ajax({
			  url: "?r=site%2Fsite%2Fgeterwurl",
			  type:'post',
			  asyn:false,
			  success:function(data){
				  var result = eval('('+data+')');
				  if(result['code']==202){
					  savePath = result['qcode_images'];
					  $('#loadingToast').fadeOut(10);
					  $('.weui-mask_transparent').css('display','none');
					  wx.previewImage({
						  current: '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
						  urls: [
							  '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
						  ]
					  });
					  return ;
				  }
				  userInfo = result;
				  var qrcode = $('#qrCodeDiv').qrcode({
					  render : "canvas",
					  text:userInfo.erwUrl,
					  height: "200",
					  width: "200",
					  background: '#ffffff',
					  foreground: '#000000',
					  src:userInfo.wx_images
				  }).hide();
				  var canvas=qrcode.find('canvas').get(0);
				  var imgbase = document.getElementById("imgbase");

				  $.ajax({
					  url: "?r=marketing%2Fsharereb%2Fuploadw",
					  type: 'post',
					  asyn:false,
					  data:{data:canvas.toDataURL('image/png')},
					  success: function (data) {
						  var re = eval('('+data+')');
						  if(re['code']==200) {
							  var erpath = '<?=Yii::$app->params['domurl']?>wx/frontend'+re['ewmPath'];
							  var txPath = '<?=Yii::$app->params['domurl']?>wx/frontend'+re['txPath'];
							  var basePath = '';
							  var canvasDom = document.getElementById("demoCanvas");
							  canvasDom.style.display='none';
							  canvasDom.width = 800;
							  canvasDom.height = 1000;
							  //通过Canvas Dom对象获取Context的对象
							  var context = canvasDom.getContext("2d");
							  context.fillStyle = '#00000';
							  context.rect(0,0,canvasDom.width,canvasDom.height);
							  var  top = canvasDom.height/2-canvasDom.width*882/678/2;

							  var weixin = new Image();//创建一张图片
							  weixin.src = '<?=Yii::$app->params['domurl']?>wx/frontend/web/upload/weixin.png';//设置图片的路径
							  weixin.onload = function () {
								  context.drawImage(weixin, 0, canvasDom.height/2-canvasDom.width*882/678/2,canvasDom.width,canvasDom.width*882/678);
								  var touxiang = new Image();
								  touxiang.src = erpath;//设置图片的路径
								  touxiang.onload = function () {
									  context.drawImage(touxiang, 113*canvasDom.width/678,294*canvasDom.width/678+top, 451*canvasDom.width/678, 451*canvasDom.width/678);
									  var image = new Image();//创建一张图片
									  image.src = txPath;//设置图片的路径
									  image.onload = function () {
										  context.drawImage(image,274*canvasDom.width/678,460*canvasDom.width/678+top,116*canvasDom.width/678,116*canvasDom.width/678);
										  basePath =canvasDom.toDataURL();
//
										  $.ajax({
											  url: "?r=marketing%2Fsharereb%2Fsaveimg",
											  type: 'post',
											  data: {data: basePath},
											  asyn:false,
											  success: function (data) {
												  var res = eval('('+data+')');
												  if(res['code']==200) {
													  savePath = res['savePath'];
													  $('#loadingToast').fadeOut(10);
													  $('.weui-mask_transparent').css('display','none');
													  wx.previewImage({
														  current: '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
														  urls: [
															  '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
														  ]
													  });
												  }
											  }
										  })
									  };
								  };
							  };
//
						  }
					  }
				  })
			  },
			  error:function(){
				  console.log("没有更多商品")
			  }
		  });


	  // 5.2 图片预览
	  document.querySelector('#previewImage').onclick = function () {
		  wx.previewImage({
			  current: '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
			  urls: [
				  '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
			  ]
		  });
	  };

	  // 5.2 图片预览
	  document.querySelector('.previewImage').onclick = function () {
		  wx.previewImage({
			  current: '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
			  urls: [
				  '<?=Yii::$app->params['domurl']?>wx/frontend'+savePath,
			  ]
		  });
	  };





	  // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
	  wx.onMenuShareTimeline({
		  title: '零元购买小普马桶', // 分享标题
//                    link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5dee5a1c01f37b68&redirect_uri=http%3A%2F%2Fwww.pooai.cn%2Fwx%2Ffrontend%2Fweb%2Findex.php%3Fr%3Dsite%252Fsite%252Fdetail%26qcode%3Dcbfe7330-e0a6-11e7-85e3-a3ad0180d146&response_type=code&scope=snsapi_userinfo&state=authorize#wechat_redirect', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		  link:"<?=Yii::$app->params['domurl']?>wx/frontend/web/index.php?r=marketing/sharereb/activity&qcode=<?=$qcode?>&ordersn=<?=$ordersn?>",
		  imgUrl: '<?=Yii::$app->params['domurl']?>/wx/frontend/web/upload/fenxiang.png',
		  trigger: function (res) {
			  alert('用户点击分享到朋友圈');
		  },
		  success: function (res) {
			  $.ajax({
				  url: '?r=marketing/sharereb/setreb',
				  type: 'post',
				  data: {ordersn:<?=$ordersn?>},
				  success: function (data) {
					  var massage = eval('('+data+')');
//                        alert(massage);alert(massage['code']);
					  if(massage['code']==200){
//                            alert(massage['message']);
					  } else if(massage['code']==500){
//                            alert(massage['message']);
					  }
					  alert(massage['message']);
				  }
			  });
		  },
		  cancel: function (res) {
			  alert('已取消');
		  },
		  fail: function (res) {
			  alert(JSON.stringify(res));
		  }
	  });
	  wx.onMenuShareAppMessage({
		  title: '零元购买小普马桶', // 分享标题
//                link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5dee5a1c01f37b68&redirect_uri=http%3A%2F%2Fwww.pooai.cn%2Fwx%2Ffrontend%2Fweb%2Findex.php%3Fr%3Dsite%252Fsite%252Fdetail%26qcode%3Dcbfe7330-e0a6-11e7-85e3-a3ad0180d146&response_type=code&scope=snsapi_userinfo&state=authorize#wechat_redirect', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		  link:"<?=Yii::$app->params['domurl']?>/wx/frontend/web/index.php?r=marketing/sharereb/activity&qcode=<?=$qcode?>&ordersn=<?=$ordersn?>",
		  desc: '成功购买小普智能马桶，分享二维码给好友，通过您的二维码购买的好友，将助你获得商品10%返利。', // 分享描述
		  imgUrl: '<?=Yii::$app->params['domurl']?>/wx/frontend/web/upload/fenxiang.png',
		  type: '', // 分享类型,music、video或link，不填默认为link
		  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		  success: function () {
			  $.ajax({
				  url: '?r=marketing/sharereb/setreb',
				  type: 'post',
				  data: {ordersn:<?=$ordersn?>},
				  success: function (data) {
					  var massage = eval('('+data+')');
//                        alert(massage);alert(massage['code']);
					  if(massage['code']==200){
//                            alert(massage['message']);
					  } else if(massage['code']==500){
//                            alert(massage['message']);
					  }
					  alert(massage['message']);

				  }
			  });
		  },
		  cancel: function () {

		  }
	  });
//        function ajaxF()
//        {
//
//        }
	  wx.error(function(res){
		  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
		  console.log("errorMSG:"+res);
	  });
  })

</script>
</html>